
<template>
  <div>
    <el-form
      v-if="form && showForm"
      :inline="true"
      :model="form"
      :rules="rules"
      ref="form"
    >
      <el-form-item label="Name" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="Type" prop="type">
        <el-select v-model="form.type" placeholder="请选择">
          <el-option
            v-for="item of types"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option> </el-select
      ></el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleAddCategory">提交</el-button>
      </el-form-item>
    </el-form>
    <div style="margin-bottom: 20px; text-align: left">
      <el-button
        @click="selectAll()"
        :type="allSelected ? 'info' : 'primary'"
        size="mini"
        >{{ allSelected ? "取消全选" : "全选" }}</el-button
      >
      <el-button
        type="danger"
        size="mini"
        :disabled="multipleSelection.length == 0"
        @click="handleBulkDelete"
        >批量删除</el-button
      >
      <el-button type="primary" size="mini" @click="showForm = !showForm">{{
        showForm ? "取消添加" : "添加目录"
      }}</el-button>
    </div>
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="id" label="Id" width="120"> </el-table-column>
      <el-table-column prop="name" label="Name" show-overflow-tooltip>
        <template #scope>
          <el-input></el-input>
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="type" label="Type" show-overflow-tooltip>
      </el-table-column>
      <el-table-column label="操作" width="120" fixed="right">
        <template #default="scope">
          <el-popover
            placement="left"
            :width="400"
            trigger="click"
            ref="popover"
            @after-enter="initForm(scope.row)"
          >
            <template #reference>
              <el-button type="text" size="small" :disabled="scope.row.id == ''"
                >编辑</el-button
              >
            </template>
            <el-form
              ref="updateForm"
              :model="updateForm"
              :rules="rules"
              size="mini"
            >
              <el-form-item prop="name">
                <el-input v-model="updateForm.name"
                  ><template #prepend>Name:</template>
                </el-input>
              </el-form-item>

              <el-form-item label="Type:" prop="type">
                <el-radio v-model="updateForm.type" v-for="type in types" :key="type.value" :label="type.value"></el-radio>
                </el-form-item>
              <el-form-item style="text-align: center">
                <el-button
                  size="mini"
                  type="primary"
                  @click="handleEdit(scope.row)"
                  >提交</el-button
                >
              </el-form-item>
            </el-form>
          </el-popover>

          <el-popconfirm
          title="确定要执行吗"
          icon="el-icon-warning"
          iconColor="red"
          @confirm="handleDeleteCategory(scope.row)"
          ><template #reference>
            <el-button
            type="text"
            size="small"
            style="color:red"
            >删除</el-button
          ></template
          >
        </el-popconfirm>

          </template
        >
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import {
  getCategories,
  addCategory,
  deleteCategory,
  deleteCategories,
  updateCategory,
} from "../../api/categories";
export default {
  data() {
    return {
      types: [
        { value: "programming", label: "programming" },
        { value: "interests", label: "interests" },
        { value: "entertainment", label: "entertainment" },
        { value: "others", label: "others" },
      ],
      rules: {
        name: [{ required: true, message: "不能为空", trigger: blur }],
        type: [{ required: true, message: "不能为空", trigger: blur }],
      },
      showForm: false,
      form: {
        name: "",
        type: "programming",
      },
      updateForm: {
        name: "",
        type: "",
      },
      allSelected: false,
      tableData: [],
      multipleSelection: [],
    };
  },
  mounted() {
    this.getCategoryList();
  },
  methods: {
    getCategoryList() {
      getCategories().then((res) => {
        this.tableData = res.data;
      });
    },
    selectAll() {
      console.log("table", this.$refs.multipleTable);
      this.$refs.multipleTable.toggleAllSelection();
      this.allSelected = !this.allSelected;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleEdit(row) {
      this.$refs.updateForm.validate((valid) => {
        if (valid) {
          console.log("update cate....", row.id, this.updateForm);
          updateCategory(row.id, this.updateForm).then(() => {
            let idx = this.tableData.indexOf(row);
            this.tableData[idx].name = this.updateForm.name
            this.tableData[idx].type = this.updateForm.type
          });
        } else {
          return false;
        }
      });
    },
    handleAddCategory() {
      console.log("add category", this.$refs.form);
      this.$refs.form.validate((valid) => {
        if (valid) {
          addCategory(this.form).then((res) => {
            this.tableData.push(res.data);
          });
        } else {
          return false;
        }
      });
    },
    handleDeleteCategory(row) {
      let idx = this.tableData.indexOf(row);
      console.log("delete idx, id", idx, row.id);
      deleteCategory(row.id).then(() => {
        this.tableData.splice(idx, 1);
      });
    },
    handleBulkDelete() {
      console.log("bulk del", this.multipleSelection);
      let ids = [];
      for (let item of this.multipleSelection) {
        ids.push(item.id);
      }
      console.log("ids", ids);
      deleteCategories(ids).then(() => {
        getCategories().then((res) => {
          this.tableData = res.data;
        });
      });
    },
    initForm(row) {
      console.log("init form...");
      this.updateForm.name = row.name;
      this.updateForm.type = row.type;
    },
  },
};
</script>

<style>
</style>
